import { watch, reactive } from 'vue';
import { useData, useRouter } from 'vitepress';

/**
 * 在开发模式下启用配置热重载
 * 1. 监听配置文件的变化
 * 2. 动态更新侧边栏和导航栏
 */
export function useConfigHotReload() {
  if (import.meta.env.DEV) {
    const { theme, site } = useData();
    const router = useRouter();

    // 动态更新侧边栏
    const updateSidebar = async () => {
      try {
        // 动态导入，确保获取最新版本
        // 添加 @vite-ignore 注释以忽略动态导入警告
        const { sidebar } = await import(/* @vite-ignore */ '../sidebar.js?t=' + Date.now());
        // 替换主题中的侧边栏
        theme.value.sidebar = reactive(sidebar);
        console.log('[VitePress] 已热更新侧边栏配置');
      } catch (err) {
        console.error('[VitePress] 更新侧边栏失败：', err);
      }
    };

    // 动态更新导航栏
    const updateNav = async () => {
      try {
        // 动态导入，确保获取最新版本
        // 添加 @vite-ignore 注释以忽略动态导入警告
        const { nav } = await import(/* @vite-ignore */ '../navigation.js?t=' + Date.now());
        // 替换主题中的导航栏
        theme.value.nav = reactive(nav);
        console.log('[VitePress] 已热更新导航栏配置');
      } catch (err) {
        console.error('[VitePress] 更新导航栏失败：', err);
      }
    };

    // 当路由变化时进行更新
    watch(
      () => router.route.path,
      () => {
        updateSidebar();
        updateNav();
      },
    );

    // 创建一个轮询机制检查配置变化
    const checkConfigInterval = 5000; // 每5秒检查一次
    setInterval(() => {
      updateSidebar();
      updateNav();
    }, checkConfigInterval);

    // 初始加载
    updateSidebar();
    updateNav();
  }
}
